<template>
    <div class="upload-table">
        <el-table v-if="tableData && tableData.length > 0" class="table-upload" :data="tableData" height="368px" style="width: 100%">
            <el-table-column prop="docname" label="名称" width="145">
                <template slot-scope="scope">
                    <div class="name" @click="goClick(scope.row)">{{scope.row.docname}}</div>
                </template>
            </el-table-column>

            <el-table-column prop="uploader" width="52" v-if="pgData.auditbj ==='0'">
                <template slot-scope="scope">
                    <el-button 
                    v-if="scope.row.shbj !== '4'"
                    type="text" 
                    class="el-icon-edit-outline my-btn" 
                    @click="editHandler(scope.row)"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column prop="uploader" width="51">
                <template slot-scope="scope">
                    <el-button type="text" class="el-icon-delete my-btn" @click="delHandler(scope.row)">删除</el-button>
                </template>
            </el-table-column>

            <!-- 审核意见 v-if="scope.row.shyj" style="font-size:12px; color:#F56C6C;"-->
            <el-table-column v-if="pgData.auditbj ==='0'" prop="shyj" label="">
                <template slot-scope="scope">
                    <span v-if=" scope.row.shbj=='2'" class="pdShbj">审核不通过 <span v-if="scope.row.shyj"> 原因：{{scope.row.shyj}}</span></span>

                    <span v-if="scope.row.shbj === '4'" class="shbj-1">
                        <i class="el-icon-loading"></i>
                        处理中...
                    </span>
                </template>
            </el-table-column>

            <!-- 推广 -->
            <el-table-column v-if="pgData.auditbj ==='1'" prop="tuiguang" label="">
                <template slot-scope="scope">
                    <p v-if="false"><span class="shbj-1">已设置推广</span></p>
                    <p v-if="true">
                        <span class="shbj-1" @click="goSpread(scope.row)">进行推广</span>
                        <span style="font-size:12px;"> 提升暴光度100倍</span>
                    </p>

                </template>
            </el-table-column>

            <el-table-column v-if="pgData.auditbj ==='1'" prop="uploader" width="64" label="推广天数">
            </el-table-column>
            <el-table-column v-if="pgData.auditbj ==='1'" prop="uploader" width="64" label="下载次数">
            </el-table-column>

            <el-table-column prop="addtime" label="上传时间" width="84px">
                <template slot-scope="scope">
                    {{scope.row.addtime.slice(0,11)}}
                </template>
            </el-table-column>
        </el-table>

        <div class="empty" v-if="!tableData.length">
            还没有上传的文件，快去上传吧
        </div>

    </div>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Array,
            default: () => [],
        },
        pgData: {
            type: Object,
            default: () => {},
        },
    },
    name: '',
    data() {
        return {};
    },
    mounted() {},
    methods: {
        // 点击name
        goClick(val) {
            if(val.shbj == '4') {return};
            this.$emit('clickTitle', val);
        },

        editHandler(val) {
            this.$emit('editHandler', val);
        },
        delHandler(val) {
            this.$emit('delHandler', val);
        },
        goSpread(val) {
            this.$emit('goSpread', val);
        },
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.el-table::before {
    height: 0;
}
.upload-table {
    ::v-deep .el-table th {
        border-bottom: none;
    }
    ::v-deep .el-table__cell {
        border-bottom: none;
        padding-bottom: 0px;
        padding: 6px 0;
    }
    .el-table::before {
        height: 0;
    }

    ::v-deep {
        // .el-table td.el-table__cell div {
        //     padding: 0 2px;
        // }
        .el-table .cell {
            padding: 0 3px;
        }
    }
    .table-upload {
        ::v-deep .el-table__header-wrapper {
            overflow: hidden;
            margin-top: -10px;
        }
        ::v-deep tr {
            height: 37px;
        }
        ::v-deep .el-table__body-wrapper {
            height: 333px !important;
        }

        .pdShbj {
            font-size: 12px;
            color: #f56c6c;
        }
        .shbj-1 {
            font-size: 12px;
            color: #409eff;
        }
    }

    .re-radio {
        margin-bottom: 14px;
        span {
            font-size: 14px;
        }
    }

    .empty {
        height: 395px;
        text-align: center;
        line-height: 250px;
        color: #606266;
    }

    .name {
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis; //文本溢出显示省略号
        white-space: nowrap; //文本不会换行
        &:hover {
            color: $primaryColor;
        }
    }
    .title {
        font-weight: 600;
    }
    .items {
        // margin-top: 20px;

        &:first-child {
            margin-top: 0;
        }
    }
    .pagination {
        display: flex;
        justify-content: right;
    }
    .my-btn {
        color: #606266;
        padding: 0;
        &:hover {
            color: $primaryColor;
        }
    }
}
</style>
